<template>
    <div id="login" >
        <!-- <div class="loginForm">
            <div style="font-size: 24px; padding: 30px 0; " class="flex-c-c">超市管理系统</div>
            <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="90px">
                <el-form-item prop="username" label="账号">
                    <el-input v-model="loginForm.username" placeholder="请输入账号" clearable style="width: 260px;" />
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" clearable style="width: 260px;" />
                </el-form-item>
                <div class="flex-c-c">
                    <el-button type="primary" @click="submitForm('loginForm')">
                        登录</el-button>
                </div>
            </el-form>
        </div> -->

        <div class="flex-c-c" style="width: 60%; font-size: 24px; background-color: #1a1aff;">
            <section class="loader">

                <div class="slider" style="--i:0">
                </div>
                <div class="slider" style="--i:1">
                </div>
                <div class="slider" style="--i:2">
                </div>
                <div class="slider" style="--i:3">
                </div>
                <div class="slider" style="--i:4">
                </div>
            </section>
        </div>
        <div style="width: 40%; " class="flex-c-c" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.5)">
            <div>
                <div style="font-size: 24px; padding: 30px 115px; ">超市管理系统</div>
                <div class="loginForm flex-c-c">
                    <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="90px">
                        <el-form-item prop="username" label="账号">
                            <el-input v-model="loginForm.username" placeholder="请输入账号" clearable
                                style="width: 260px;" />
                        </el-form-item>
                        <el-form-item prop="password" label="密码">
                            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" clearable
                                style="width: 260px;" />
                        </el-form-item>
                        <div class="flex-c-c">
                            <el-button type="primary" size="small" @click="submitForm('loginForm')">
                                登录</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
#login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    overflow-y: hidden;
    height: 100%;
    background-color: #fff;
    display: flex;
    /* background: url("../assets/img/01.jpg") center top / cover no-repeat; */
}

.loginForm {
    background-color: white;
    width: 400px;
    /* height: 280px; */
    /* margin: 150px auto; */
    /* text-align: center; */
    /* padding-top: 10px; */
    /* border-color: #555555; */
    /* border-style: solid; */
    border-radius: 15px;
}

/* From Uiverse.io by Nawsome */
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.slider {
    overflow: hidden;
    background-color: white;
    margin: 0 15px;
    height: 80px;
    width: 20px;
    border-radius: 30px;
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,
        inset -5px -5px 10px rgba(0, 0, 255, 0.1),
        inset 5px 5px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
        inset 0px 0px 0px rgba(0, 0, 0, 0.1);
    animation: animate_2 2.5s ease-in-out infinite;
    animation-delay: calc(-0.5s * var(--i));
}

@keyframes animate_2 {
    0% {
        transform: translateY(250px);
        filter: hue-rotate(0deg);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(250px);
        filter: hue-rotate(180deg);
    }
}
</style>
<script>
import { ajaxPost, popup } from "@/assets/js/common";
import Cookies from "js-cookie";

export default {
    data() {
        return {
            loading: false,
            loginForm: {
                username: "",
                password: "",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "账号不能为空",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur",
                    }
                ],
            },
        };
    },

    mounted() {

    },

    beforeUnmount() {
    },

    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    ajaxPost("/login", this.loginForm)
                        .then((res) => {
                            res = res.data;
                            if (res.code == 200) {
                                Cookies.set("token", res.data.token, {
                                    expires: 1 / 48,
                                });
                                Cookies.set(
                                    "employee",
                                    JSON.stringify(res.data.employee),
                                    { expires: 1 / 48 }
                                );
                                popup("登录成功，请稍等...");
                                this.$router.push("/sale_management/sale_cmd/list");
                            } else {
                                popup(res.msg, "warning");
                            }
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                }
                // else {
                //     popup("账号或密码格式不正确！", "error");
                // }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>